<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/17 17:28
    @Version 1.0
    @Description 文件说明
  -->
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        #div1 input {background: white}
        #div1 input.active {background: yellow}
        #div1 div {width:200px;height: 200px; background: #CCC;display: none}
    </style>
    <script>
        window.onload=function () {
            var oDiv = document.getElementById('div1');
            var aBtn = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');

            for (var i = 0;i < aBtn.length;i ++){
                aBtn[i].index = i;
                aBtn[i].onclick = function () {
                    for (var i = 0;i < aBtn.length;i ++){
                       aBtn[i].className='';
                       aDiv[i].style.display='none';
                    }
                    this.className='active';
                    aDiv[this.index].style.display='block';
                }
            }
        }
    </script>
</head>
<body>
<div1 id="div1">
    <input class="active" type="button" value="aaa">
    <input type="button" value="bbb">
    <input type="button" value="ccc">
    <div style="display: block">aaa</div>
    <div>bbb</div>
    <div>ccc</div>
</div1>
</body>
</html>